<!--  -->
<template>
  <div class="my">
    <div class="Profile_title__25nfj">
      <img :src="imgSrc" alt="" />
      <div class="Profile_info__3vEvl">
        <div class="Profile_myIcon__-IgDA">
          <img
            class="Profile_avatar__1ifjP"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F30%2F20190130101049_N3iEQ.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631883529&t=ec63bc23fcf0e9b05ab8052e81bb0d05"
            alt=""
          />
        </div>
        <div class="Profile_user__1o6LW">
          <div class="Profile_name__1-HWq">游客</div>
          <div class="Profile_edit__OzQSn">
            <el-button @click="login">去登录</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="am-grid">
      <div class="am-grid-square">
        <router-link to="/housing" class="mylink">
          <van-icon name="wap-home-o" />
          <span>我的出租</span>
        </router-link>
        <router-link to="" class="mylink">
          <van-icon name="underway-o" />
          <span>看房记录</span>
        </router-link>
        <router-link to="/lease" class="mylink">
          <van-icon name="ecard-pay" />
          <span>成为房主</span>
        </router-link>
        <router-link to="/personal" class="mylink">
          <van-icon name="contact" />
          <span>个人资料</span>
        </router-link>
        <router-link to="" class="mylink">
          <van-icon name="service-o" />
          <span>联系我们</span>
        </router-link>
        <router-link to="" class="mylink"> </router-link>
      </div>
    </div>
    <div class="Profile_ad__3G-vo">
      <img src="../../image/join.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      imgSrc: require("../../image/bg.png"),
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    login() {
      this.$router.push("/login");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .Profile_title__25nfj {
    min-height: 300px;
    position: relative;
    img {
      width: 100%;
    }
    .Profile_info__3vEvl {
      position: absolute;
      background: #fff;
      width: 85%;
      height: 60%;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 10px 3px #ddd;
      margin: 50px auto 0;
      padding: 0 20px;
      text-align: center;
      font-size: 13px;
      .Profile_myIcon__-IgDA {
        position: relative;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        border-radius: 50%;
        width: 70px;
        height: 70px;
        border: 5px solid #f5f5f5;
        display: inline-block;
        box-shadow: 0 2px 2px #bdbdbd;
        .Profile_avatar__1ifjP {
          width: 100%;
          border-radius: 50%;
        }
      }
      .Profile_user__1o6LW {
        padding-top: 15px;
        .Profile_name__1-HWq {
          margin-top: -30px;
          margin-bottom: 10px;
        }
        .Profile_edit__OzQSn {
          color: #999;
          font-size: 12px;
          margin-top: 20px;
          .el-button {
            position: relative;
            border: none;
            background-color: #21b97a;
            font-size: 13px;
            height: 30px;
            line-height: 30px;
            padding: 0 15px;
            display: inline-block;
            color: #fff;
          }
        }
      }
    }
  }
  .am-grid {
    .am-grid-square {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      text-align: center;
      margin-top: 20px;
      .mylink {
        color: #000;
        font-size: 14px;
        width: 33%;
        margin-bottom: 40px;
        .van-icon {
          font-size: 18px;
          padding-bottom: 10px;
        }
        span {
          display: block;
        }
      }
    }
  }
  .Profile_ad__3G-vo {
    text-align: center;
    margin-top: 10px;
    img {
      width: 92%;
    }
  }
}
</style>
